<template>
    <fieldset>
        <legend><h2>页面一</h2></legend>
        <div>{{count}}</div>
        <ul>
            <li v-for="(item,i) in getCart" :key="i">
                <span>{{item.proName}}</span>
                <span>{{item.proPrice}}</span>
            </li>
            <h2>{{getSum}}</h2>
            <h2>{{}}</h2>
        </ul>
    </fieldset>
</template>

<script>
    import {mapState} from "vuex";
    export default {
        name: "pageone",
        data:()=>{
            return{
                localNum:9090,
                mag:"hello ,pageOne",
            }
        },

        // computed:mapState({
        // //  一  箭头函数
        //     getCart:state=>state.cart,
        // //    二
        //     count:"count",
        // //    三
        //     pageone(state){
        //         return state.count +this.localNum;
        //     }
        // })

        //辅助函数和计算属性混合使用
        computed:{
            getSum(){
                return this.localNum+this.mag;
            },
        //    vuex辅助函数
            ...mapState({
                getCart:"cart",
                count:"count"
            })
        }

        // computed:{
        //     //获取Vuex中state的数据,在组件的计算属性中实现 语法:this.$store.state.属性名 (this是当前组件实例)
        //     getCart(){
        //         return this.$store.state.cart
        //     },
        //     count(){
        //         return this.$store.state.count
        //     }
        // }
    }
</script>

<style scoped>

</style>